<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>chat</title>
    <style>

        * {
            margin: 0;
            padding: 0;
        }


        .chat_item {
            width: 800px;

            background-color: #ccc;
            border: 1px solid #000;
            border-radius: 2px;
            margin: 10px auto;
        }

        .chat_friend {
            display: flex;
            flex-direction: row;
        }

        .chat_myself {
            display: flex;
            flex-direction: row-reverse;
        }

        .avatar img {
            width: 80px;
            height: 80px;
            border: 1px solid #52913C;
            border-radius: 5px;
            margin: 1px 20px;
            /*border-color: aquamarine;*/
        }

        .content{
            border: 1px solid #ccc;
            border-radius: 8px;
            position: relative;

        }

        .friend_content{
            background-color: #fff;
        }
        .myself_content{
            background-color: #95EC69;
        }

        .pointer{
            position: absolute;
            width: 1px;
            height: 1px;
            /*z-index: -1;*/
            top: 16px;
            border-radius: 4px;
            transform: rotate(
                    -45deg
            );
        }
        .friend_content .pointer{
            left: -8px;
            border: 8px solid #fff;
        }
        .myself_content .pointer{
            right: -8px;
            border: 8px solid #95EC69;
        }

        .content p{
            flex-direction: column;
            margin: 8px 12px;
            height: 30px;
            line-height: 30px;
            font-size: 16px;
        }
    </style>
</head>
<body>
<div>
    这是聊天室
</div>
<div class="chat_room">
    <div class="chat_item">
        <div class="chat_friend">
            <div class="avatar">
                <img src="friend.jpg">
            </div>
            <div class="content friend_content">
                <i class="pointer"></i>
                <p>
                    hello
                </p>
                <p>
                    hello
                </p>
                <p>
                    hello
                </p>
                <p>
                    hello
                </p>
                <p>
                    hello
                </p>
                <p>
                    hello
                </p>
            </div>
        </div>
        <div class="chat_myself">
            <div class="avatar">
                <img src="myself.jpg">
            </div>
            <div class="content  myself_content">
                <i class="pointer"></i>
                <p>
                    你好
                </p>
            </div>
        </div>
        <div class="chat_friend">
            <div class="avatar">
                <img src="friend.jpg">
            </div>
            <div class="content friend_content">
                <i class="pointer"></i>
                <p>
                    hello
                </p>
            </div>
        </div>
        <div class="chat_myself">
            <div class="avatar">
                <img src="myself.jpg">
            </div>
            <div class="content  myself_content">
                <i class="pointer"></i>
                <p>
                    你好
                </p>
            </div>
        </div>
        <div class="chat_myself">
            <div class="avatar">
                <img src="myself.jpg">
            </div>
            <div class="content  myself_content">
                <i class="pointer"></i>
                <p>
                    你好
                </p>
            </div>
        </div>
        <div class="chat_myself">
            <div class="avatar">
                <img src="myself.jpg">
            </div>
            <div class="content  myself_content">
                <i class="pointer"></i>
                <p>
                    你好
                </p>
            </div>
        </div>
        <div class="chat_myself">
            <div class="avatar">
                <img src="myself.jpg">
            </div>
            <div class="content  myself_content">
                <i class="pointer"></i>
                <p>
                    你好
                </p>
            </div>
        </div>
        <div class="chat_myself">
            <div class="avatar">
                <img src="myself.jpg">
            </div>
            <div class="content  myself_content">
                <i class="pointer"></i>
                <p>
                    你好
                </p>
            </div>
        </div>
    </div>
</div>
</body>
</html>